<form nz-form [formGroup]="group" (ngSubmit)="submit()">
  <nz-form-item>
    <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="username">用户名</nz-form-label>
    <nz-form-control [nzSm]="14" [nzXs]="24" [nzErrorTip]="nameErrorTpl">
      <input nz-input formControlName="username" />
      <ng-template #nameErrorTpl let-control>
        <ng-container *ngIf="control.hasError('required')">请输入名称!</ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="name">姓名</nz-form-label>
    <nz-form-control [nzSm]="14" [nzXs]="24" [nzErrorTip]="idErrorTpl">
      <input nz-input formControlName="name" />
      <ng-template #idErrorTpl let-control>
        <ng-container *ngIf="control.hasError('required')">请输入姓名!</ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="email">邮箱</nz-form-label>
    <nz-form-control [nzSm]="14" [nzXs]="24" [nzErrorTip]="emailErrorTpl">
      <input nz-input formControlName="email" />
      <ng-template #emailErrorTpl let-control>
        <ng-container *ngIf="control.hasError('required')">请输入邮箱!</ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSm]="6" [nzXs]="24">角色</nz-form-label>
    <nz-form-control [nzSm]="14" [nzXs]="24" [nzErrorTip]="rolesErrorTpl">
      <nz-select nzMode="multiple" [nzOptions]="listOfOption" name="roles" formControlName="roles" nzShowSearch
        nzAllowClear></nz-select>
      <ng-template #rolesErrorTpl let-control>
        <ng-container *ngIf="control.hasError('required')">请确定角色权限!</ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="disabled">是否禁用</nz-form-label>
    <nz-form-control [nzSm]="14" [nzXs]="24" nzHasFeedback>
      <nz-switch nzCheckedChildren="是" nzUnCheckedChildren="否" name="disabled" formControlName="disabled"></nz-switch>
    </nz-form-control>
  </nz-form-item>
</form>